<script lang="ts" setup>
import { reactive, ref, watch, nextTick, onMounted } from "vue";
import UserRoleList from "./user-role-list.vue";
import DeptRoleList from "./dept-role-list.vue";
import userGroupRoleServiceApi from "@/api/modules/org/bean/user-group-role";
import { ElMessage } from "element-plus";

const UserRoleListRef = ref<InstanceType<typeof UserRoleList> | null>(null);
const DeptRoleListRef = ref<InstanceType<typeof DeptRoleList> | null>(null);
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "ok", val: any[]): void;
}>();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userDeptId: {
    type: String,
    default: ""
  }
});
const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleModelValue.value = val;
  }
);
watch(visibleModelValue, val => {
  emit("update:visible", val);
});

const UserRoleListDialogState = reactive({
  queryParam: { unitId: "10000" },
  handleClose: () => {
    visibleModelValue.value = false;
  },

  /**
   * 选择用户角色checkout
   */
  handleUserRole: (data: any) => {
    data.userDeptId = props.userDeptId;
    userGroupRoleServiceApi.toggleUserDeptRole(data).then((res: any) => {
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "操作成功"
        });
        UserRoleListRef.value.getUserRoleListTableRef().loadTable();
      }
    });
  },
  onTabClick: (val: any) => {
    if (val.props.label == "用户角色列表") {
      UserRoleListRef.value.getUserRoleListTableRef().loadTable();
    } else {
      DeptRoleListRef.value.getDeptRoleListTableRef().loadTable();
    }
  }
});

onMounted(() => {
  nextTick(() => {
    UserRoleListRef.value.getUserRoleListTableRef().loadTable();
  });
});
</script>
<template>
  <div class="jxtech-dialog-form">
    <el-dialog
      v-model="visibleModelValue"
      :close-on-click-modal="false"
      title="用户角色"
      width="80%"
      destroy-on-close
      :before-close="UserRoleListDialogState.handleClose"
    >
      <el-tabs type="border-card" @tab-click="UserRoleListDialogState.onTabClick">
        <el-tab-pane label="用户角色列表">
          <user-role-list
            v-if="visibleModelValue"
            ref="UserRoleListRef"
            :user-dept-id="userDeptId"
            @change="UserRoleListDialogState.handleUserRole"
          ></user-role-list>
        </el-tab-pane>
        <el-tab-pane label="部门角色列表">
          <dept-role-list v-if="visibleModelValue" ref="DeptRoleListRef" :user-dept-id="userDeptId"></dept-role-list>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
